<template>
    <div class="notice">
		<!-- 头部列 -->
        <div class="header">
			<div class="header-item"  @click="toPage('/pages/notice/newFollow/newFollow')">
				<div class="header-item-img">
					<image src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/msgFollow.png" mode=""></image>
					<div class="dot dot-lot" v-show="messageInfo.newFansNumber>99">99+</div>
					<div :class="{'dot':true,'dotD':messageInfo.newFansNumber>9}" v-show="messageInfo.newFansNumber && messageInfo.newFansNumber<99">{{messageInfo.newFansNumber}}</div>
				</div>
				<div class="header-text">新增关注</div>
			</div>
			<div class="header-item"  @click="toPage('/pages/notice/directMsgList/directMsgList')">
				<div class="header-item-img">
					<image src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/msgPrivate.png" mode=""></image>
					<div class="dot dot-lot" v-show="messageInfo.unReadMessage>99">99+</div>
					<div :class="{'dot':true,'dotD':messageInfo.unReadMessage>9}" v-show="messageInfo.unReadMessage && messageInfo.unReadMessage<99">{{messageInfo.unReadMessage}}</div>
				</div>
				
				<div class="header-text">私信</div>
			</div>
			<div class="header-item"  @click="toPage('/pages/notice/anonymous/anonymous')">
				<div class="header-item-img">
					<image src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/msgNick.png" mode=""></image>
					<div class="dot dot-lot" v-show="messageInfo.unReadAnonymous>99">99+</div>
					<div :class="{'dot':true,'dotD':messageInfo.unReadAnonymous>9}" v-show="messageInfo.unReadAnonymous && messageInfo.unReadAnonymous<99">{{messageInfo.unReadAnonymous}}</div>
				</div>
				<div class="header-text">匿名留言</div>
				
			</div>
		</div>
		<!-- 头部列end -->
		<div class="divide"></div>
		<!-- 客服 -->
		<!-- <div class="customer">
			<div class="customer-logo-wrapper">
				<image :src="defaultJpg" alt="" class="customer-logo"/>
			</div>
			<button open-type="contact" @contact="handleContact">联系客服</button>
		</div> -->
		<!-- 客服end -->
		
		<!-- 导航 -->
		<div class="nav-tab">
			  <div 
			  :class="{'tab-item':true,'tab-item-activity':tabBarIndex==index}"
			  v-for="(item,index) of tabBarArr"
			  :key="index"
			  @click="tabBarChange(item,index)"
			  >{{item.text}}</div>
		</div>
		<!-- 导航end -->
		
		<!-- 信息列 -->
		<div class="msg-list-wrapper">
			<!-- 系统信息 -->
			<template v-if="tabBaractive=='all'">
				<!-- <van-swipe-cell :right-width="60" disabledLeft :left-width="0">
					<van-cell-group> -->
					<systemMsgList :systemMsgList="systemMsgList"/>
					<div class="tips" v-if="systemMsgList.length!=0">已加载全部</div>
					<div class="no-tips" v-if="systemMsgList.length==0">
						<image src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/noCollect.png" mode="widthFix"></image>
						<div>暂无系统消息</div>
					</div>
					<!-- </van-cell-group>
						<div slot="right" class="slot-right"><div  class="slot-right-btn">删除</div></div>
				</van-swipe-cell> -->
				
				
			</template>
			<!-- 系统信息end -->
			
			<!-- @我 -->
			<template v-if="tabBaractive=='msg'">
				<contactList  :commentsList="commentsListData"/>
				<div class="tips" v-if="commentsListData.length!=0">已加载全部</div>
				<div class="no-tips" v-if="commentsListData.length==0">
					<image src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/noCollect.png" mode="widthFix"></image>
					<div>暂无@我消息</div>
				</div>
			</template>
			<!-- <comments v-if="tabBaractive=='msg'" :commentsList="commentsListData"/> -->
			<!-- @我end -->
			
			<!-- 评论 -->
			<template v-if="tabBaractive=='comments'">
				<comments  :commentsList="commentsList"/>
				<div class="tips" v-if="commentsList.length!=0">已加载全部</div>
				<div class="no-tips" v-if="commentsList.length==0">
					<image src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/bbMachine/noCollect.png" mode="widthFix"></image>
					<div>暂无评论消息</div>
				</div>
			</template>
			<!-- 评论end -->
		</div>
		
		<!-- 信息列end -->
         <navBar></navBar>
    </div>
</template>

<script>
    import navBar from '@/pages/components/navBar/index.vue'
	import systemMsg from '@/pages/components/notice/systemMsgList/index.vue'
	import contactList from '@/pages/components/notice/contactList/index.vue'
	import comments from '@/pages/components/notice/comments/index.vue'
	let defaultJpg=require('../../static/img/quan-active.png')
    export default {
        name: "notice",
		data(){
			return{
				defaultJpg:defaultJpg,
				tabBarIndex:0,
				tabBaractive:'all',//msg@我，comments收到评论
				tabBarArr:[{text:'系统消息',value:'all'},{text:'@我',value:'msg'},{text:'收到评论',value:'comments'}],
				pageNum:{//各分类的页码
					all:1,
					msg:1,
					comments:1
				},
				messageInfo:{},//信息数量
				limit:4,
				tabBarLoad:[],//初始已加载的tab类型
				commentsList:[],//评论列
				systemMsgList:[],//系统消息
				commentsListData:[],//@的数据
				GetAllNumberFunction:''//定时器
			}
		},
		methods:{
			tabBarChange(item,index){
				this.tabBaractive=item.value;
				this.tabBarIndex=index;
				if(!this.tabBarLoad.includes(this.tabBaractive)){
					this.tabBarLoad.push(this.tabBaractive);
					switch(this.tabBaractive){
						case 'all':this.getSysNewsList();break;
						case 'msg':this.getPostArticleAtMyList();break;
						case 'comments':this.getUserPartPostArticle();break;
					}
				}
				
			},
			async getSysNewsList(){
				//获取(全部)系统消息
				let params={
					user_token:uni.getStorageSync('userToken'),
					page:this.pageNum.all,
					limit:this.limit
				}
				let res=await this.$api.getSysNewsList(params);
				if(res.data.level=='success'){
					this.systemMsgList=[...this.systemMsgList,...res.data.data]
				}
				uni.stopPullDownRefresh()
			},
			async getPostArticleAtMyList(){
				//获取@我的
				let params={
					user_token:uni.getStorageSync('userToken'),
					page:this.pageNum.msg,
					limit:this.limit
				}
				let res=await this.$api.getPostArticleAtMyList(params);
				if(res.data.level=='success'){
					if(res.data.data){
						this.commentsListData=[...this.commentsListData,...res.data.data]
					}
					
				}
				uni.stopPullDownRefresh()
				
			},
			async getUserPartPostArticle(){
				//获取我(相关）的贴子列表
				let type=this.tabBaractive;
				let searchType='comment'

				let params={
					user_token:uni.getStorageSync('userToken'),
					page:this.pageNum.comments,
					limit:this.limit,
					type:searchType
				}
				let res=await this.$api.getUserPartPostArticle(params);
				if(res.data.level=='success'){
					this.commentsList=[...this.commentsList,...res.data.data];
				}
				uni.stopPullDownRefresh()
			},
			toPage(url){
				uni.navigateTo({
					url:url
				})
			},
			pageAdd(){
				switch(this.tabBaractive){
					case 'all':this.pageNum.all++;this.getSysNewsList();break;
					case 'msg':this.pageNum.msg++;this.getPostArticleAtMyList();break;
					case 'comments':this.pageNum.comments++;this.getUserPartPostArticle();break;
				}
			},
			async getAllNumber(){
				//获取用户关注数、粉丝数、圈子关注数、获赞数
				let params={
					user_token:uni.getStorageSync('userToken')
				}
				let res=await this.$api.getAllNumber(params);
				if(res.data.level=='success'){
					this.messageInfo=res.data.data
				}
			},
			intervalGetAllNumber(){
				this.GetAllNumberFunction=setInterval(()=>{
					this.getAllNumber()
				},5000)
			},
			pageRefresh(){
				switch(this.tabBaractive){
					case 'all':
					this.pageNum.all=1;
					this.systemMsgList=[];
					this.getSysNewsList();
					
					break;
					case 'msg':
					this.pageNum.msg=1;
					this.commentsListData=[]
					this.getPostArticleAtMyList();
					
					break;
					case 'comments':
					this.pageNum.comments=1;
					this.commentsList=[]
					this.getUserPartPostArticle();
					break;
				}
			}
		},
        components:{
            navBar,
			systemMsg,
			contactList,
			comments
        },
        onLoad(){
			uni.hideTabBar()
            getApp().globalData.navBarIndex=3;
			this.tabBarChange({text:'全部消息',value:'all'})
        },
		onShow() {
			this.getAllNumber()
			this.intervalGetAllNumber()
		},
		onHide(){
			clearInterval(this.GetAllNumberFunction)
		},
		onReachBottom() {
			this.pageAdd()
		},
		onPullDownRefresh() {
			this.pageRefresh()
		}
    }
</script>

<style scoped lang="scss">
	//头部
	@import '~@/static/scss/mixin.scss';
	.no-tips{
		margin-top:1vh;
		@include flexWrap();
		background: #fff;
		color:#6F7073;
		&>div{
			text-align: center;
			width: 100%;
		}
		image{
			width: 60vw;
		}
	}
	.tips{
		width:100%;
		text-align: center;
	}
	.notice{
		padding-bottom: 100rpx;
		.header{
			background: #fff;
			display: flex;
			justify-content: space-around;
			align-items: center;
			height: 200rpx;
			&-item{
				
				image{
					width: 80rpx;
					height: 80rpx;
					margin-bottom:10rpx ;
				}
			}
		}
		.header-item{
			@include flexWrap();
			.header-item-img{
				position: relative;
			}
			
			.header-text{
				width: 100%;
				text-align: center;
				margin-top:20rpx;
			}
			.dot{
				position: absolute;
				right: -60rpx;
				top:-30rpx;
				margin-top:20rpx;
				margin-right: 20px;
				text-align: center;
				background: #FF3A4C;
				color: #fff;
				width:30rpx;
				height: 30rpx;
				line-height: 30rpx;
				border-radius: 50%;
				font-size: 15rpx;
			}
			.dotD{
				font-size: 15rpx;
			}
			.dot-lot{
				width: auto !important;
				border-radius: 20rpx;
			}
		}
	}
	
	.divide{
		width: 100%;
		height: 20rpx;
		background: #eee;
	}
	//客服
	.customer{
		@include flex(space-between,center);
		background: #fff;
		padding:10rpx 20rpx ;
		.customer-logo-wrapper{
			flex:1;
			.customer-logo{
				width:60rpx;
				height: 60rpx;
			}
		}
		
		button{
			width:200rpx;
			border-radius: 20rpx;
			height: 60rpx;
			line-height: 60rpx;
			color:gray;
		}
	}
	.nav-tab{
		border-top:1px solid #eee;
		border-bottom:1px solid #eee;
		@include flex(space-around);
		background: #fff;
		.tab-item{
			font-weight: 600;
			color:gray;
			font-size: 30rpx;
			line-height: 30rpx;
			padding:30rpx 0;
			position: relative;
		}
		.tab-item-activity{
			color: #000;
			position: relative;
			z-index: 10;
			&:after{
				content: '';
				width: 70rpx;
				background:rgba(255,226,38,0.8);
				left:50%;
				transform: translateX(-50%);
				position: absolute;
				bottom: 20rpx;
				height: 20rpx;
				z-index: -1;
			}
		}
		}
	

</style>
<style>
	.slot-right{
	  height: 100%;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  width: 60px;
	  color:#fff;
	  background: red;
	}
	.projectList .slot-right-btn{
	    width:100%;
	    text-align: center;
	    height: 100%;
	    line-height: 95px
	  }
	  
	  .van-tabs__line{
		  height: 20rpx !important;
		  bottom:30rpx !important;
		  width: 30rpx !important;
		  margin-right:60rpx !important ;
		  background: rgba(255,226,38,0.6) !important;
		  
	  }
</style>